<template>
	<view class="">
		<view style="padding-top: 50%;" v-if="list&&!list.length">
			<u-empty>
			</u-empty>
		</view>
		
		<scroll-view scroll-y="true" v-else>
			<template v-if="type==2">
				<view v-for="(i, key) in list" :key="i.goodsSkuId"
					class="p-2 m-2 bg-white flex rounded u-border-bottom">
					<view class="mr-3">
						<u-image width="100" height="100" :src="getFilePath(i.goodsSkuCoverPic)" radius="15">
						</u-image>
					</view>
					<view class="text-sm flex-1">
						<view class="">
							<text class="">SKU名称</text>：
							<text class="text-black-666">{{i.goodsSkuName}}</text>
						</view>
						<view class="">
							<text class="">计量单位</text>：
							<text class="text-black-666">{{i.goodsMeasuringName}}</text>
						</view>
						<view class="flex items-center">
							<view class="">商品数量</view>：
							<view class="text-black-666">{{i.goodsCount}}</view>
							
						</view>
						<view class="">
							<text class="">商品规格</text>：
							<text class="text-black-666">{{i.goodsSpecification}}</text>
						</view>
						<view class="">
							<text class="">商品总数</text>：
							<text class="text-black-666">{{i.goodsTotal}}</text>
						</view>
					
						<view class="flex justify-end mt-3">
							<view class="">
								<u-button type="error" size="mini" @click="onStore('11', i)">返仓</u-button>
							</view>
							<view class="ml-2">
								<u-button type="primary" size="mini" @click="onStore('10', i)">报损</u-button>
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="m-5 p-5 bg-white rounded shadow" v-for="i in list" @click="toGoodsList(i)">
					<view class="flex justify-between items-center">
						<view class="font-bold ">
							{{i.allocationDocumnetName}}
						</view>
				
						<view class="">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="text-sm mt-2 ">
						<text class="mr-2">销售起止日期</text>
						<text>{{$u.date(i.allocationDocumnetStartFrom)}}至{{$u.date(i.allocationDocumnetEndTo)}}</text>
					</view>
				</view>
			</template>
			
		</scroll-view>
		<u-gap height="64" v-if="type==1"></u-gap>
		<view class="fixed bottom-0 left-0 right-0 bg-white p-3 u-border-top" v-if="type==1">
			<u-button type="primary" shape="circle" @click="onAddGoods">新增要货单</u-button>
		</view>
		<u-popup :show="showPopup" round="15">
			<view class="">
				<view class="flex justify-between u-border-bottom p-3">
					<text @click="showPopup=false">取消</text>
					<text class="text-primary" @click="onPickerConfirm">确定</text>
				</view>
				<view class="p-3">
					<view class="mb-2">

						<view class="text-sm text-black-666 mb-2">制单人</view>
						<u-input v-model="formData.nickName" disabled></u-input>
					</view>
					<view class="mb-2">

						<view class="text-sm text-black-666 mb-2">制单时间</view>
						<u-input v-model="formData.createTime" disabled></u-input>
					</view>
					<view class="mb-2">
						<view class="text-sm text-black-666 mb-2">要货单名称<text class="u-error">*</text></view>
						<u-input placeholder="请输入要货单名称" v-model="formData.allocationDocumnetName"></u-input>
					</view>
					<view class="mb-2">
						<view class="text-sm text-black-666 mb-2">目标销售开始日期<text class="u-error">*</text></view>
						<view class="rounded u-border p-2 u-light-color text-15" @click="showStartPicker=true">
							<text v-if="!formData.allocationDocumnetStartFrom">请选择目标销售开始日期</text>
							<text v-else>{{formData.allocationDocumnetStartFrom}}</text>
						</view>
						<u-datetime-picker :show="showStartPicker" v-model="startTime" mode="date"
							@cancel="showStartPicker=false" @confirm="onStartConfirm" confirmColor="#2A6757">
						</u-datetime-picker>
					</view>
					<view class="mb-2">
						<view class="text-sm text-black-666 mb-2">目标销售结束日期<text class="u-error">*</text></view>
						<view class="rounded u-border p-2 u-light-color text-15" @click="showEndPicker=true">
							<text v-if="!formData.allocationDocumnetEndTo">请选择目标销售结束日期</text>
							<text v-else>{{formData.allocationDocumnetEndTo}}</text>
						</view>
						<u-datetime-picker :show="showEndPicker" v-model="endTime" mode="date"
							@cancel="showEndPicker=false" @confirm="onEndConfirm" confirmColor="#2A6757">
						</u-datetime-picker>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showStorePopup" round="15">
			<view class="">
				<view class="flex justify-between u-border-bottom p-3">
					<text @click="showStorePopup=false">取消</text>
					<text class="text-primary" @click="onStorePickerConfirm">确定</text>
				</view>
				<view class="p-3">
					<view class="mb-2" v-if="occurType == 11">
						<view class="text-sm text-black-666 mb-2">返仓数量<text class="u-error">*</text></view>
						<u-input v-model="storeForm.occurCount" type="number" placeholder="请输入返仓数量"></u-input>
					</view>
					<view class="mb-2" v-if="occurType == 10">
						<view class="text-sm text-black-666 mb-2">添加图片</view>
						<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
							:maxCount="9"></u-upload>
					</view>
					<view class="mb-2">
						<view class="text-sm text-black-666 mb-2">备注</view>
						<u-textarea v-model="storeForm.remark" placeholder="请输入备注"></u-textarea>
					</view>
					
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import { uploadFile} from '@/utils/file.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		setTitle,
		showModal,
		toast
	} from '../../utils/utils'
	import {
		getFilePath
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				list: null,
				type: 0,
				showPopup: false,
				showStartPicker: false,
				showEndPicker: false,
				formData: {},
				startTime: uni.$u.date(),
				endTime: uni.$u.date(),
				showStorePopup: false,
				
				occurType:'',
				storeForm: {},
				
				fileList1: []
			}
		},
		computed: {
			...mapGetters(['user'])
		},
		onLoad(query) {
			const {
				refRecordId,
				type
			} = query
			this.shopId = refRecordId
			this.type = type
			if (this.type == 1) {
				setTitle('选择要货单')
			} 
			
			if (this.type == 2) {
				// 库存
				setTitle('库存清单')
				this.getInventoryVoList()
			} else {
				this.getSchainAllocationShops()
			}
			const {
				nickName
			} = this.user
			this.formData.nickName = nickName
			this.formData.createTime = this.$u.date()
			this.formData.shopId = refRecordId
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				
				this.storeForm.detailPhotos = this[`fileList${event.name}`].map(i => i.url).join(',')
				
				console.log(this.storeForm.detailPhotos)
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$store.state.uploadUrl,
						filePath: url,
						fileType: 'image',
						name: 'file',
						header: {
						  Authorization: 'Bearer ' + this.$store.state.token,
						},
						success: (res) => {
							console.log(res)
							console.log(res.data)
							if (res.statusCode === 200) {
								const result = JSON.parse(res.data)
								if (result.code === 200) {
									setTimeout(() => {
										resolve(result.data.objectName)
									}, 1000)
								}
							}
						}
					});
				})
			},
			uploadImage(i, index) {
				uni.chooseImage({
					count: 1,
					success: async res => {
						const tempFilePaths = res.tempFilePaths
						const result = await uploadFile({
							url: tempFilePaths[0],
						})
						// console.log(result)
						console.log(result)
						return
						// this.list[index].image = result
					}
				})
			},
			onStore(type, i) {
				console.log(i)
				const {inventoryId, goodsSkuId} = i
				this.inventoryId = inventoryId
				this.goodsSkuId = goodsSkuId
				this.occurType = type
				this.showStorePopup = true
			},
			getFilePath,
			getInventoryVoList() {
				request('selectInventoryVoList', {
					data: {
						warehouseId: this.shopId,
					},
					
					row: true
				}).then(res => {
					console.log(res)
					if (res.code === 200) {
						this.list = res.rows
					}
				})
			},
			onStorePickerConfirm() {
				const {occurType, inventoryId, goodsSkuId} = this
				const {detailPhotos, occurCount, remark} = this.storeForm
				
				const data = {
					occurType, inventoryId, goodsSkuId,detailPhotos, occurCount, remark
				}
				console.log(data)
				request('addFlow', {
					method:'post',
					data,
					row: true
				}).then(res => {
					if (res.code === 200) {
						toast(res.msg)
						this.showStorePopup = false
						this.fileList1 = []
						this.storeForm = {}
						setTimeout(this.getInventoryVoList, 1000)
					}
				})
			},
			onPickerConfirm() {
				const {
					allocationDocumnetStartFrom,
					allocationDocumnetEndTo,
					allocationDocumnetName,
					shopId
				} = this.formData
				console.log(allocationDocumnetStartFrom)
				const data = {
					allocationDocumnetStartFrom: new Date(allocationDocumnetStartFrom).getTime(),
					allocationDocumnetEndTo: new Date(allocationDocumnetEndTo).getTime(),
					allocationDocumnetName,
					shopId
				}
				request('addYHD', {
					method: 'post',
					data,
					row: true,
					loading: false,
				}).then(res => {
					if (res.code === 200) {
						toast(res.msg)
						this.showPopup = false
						setTimeout(() => {
							this.getSchainAllocationShops()
						}, 1000)
						
					}
				})
			},
			onStartConfirm({
				value
			}) {
				this.formData.allocationDocumnetStartFrom = this.$u.date(value)
				this.showStartPicker = false
			},
			onEndConfirm({
				value
			}) {
				this.formData.allocationDocumnetEndTo = this.$u.date(value)
				this.showEndPicker = false
			},
			onClick() {
				console.log('click')
			},
			onAddGoods() {
				this.showPopup = true
			},
			getSchainAllocationShops() {
				request('schainAllocationShops', {
					data: {
						shopId: this.shopId,
						documentType: this.type
					},
					row: true
				}).then(res => {
					console.log(res)
					if (res.code === 200) {
						this.list = res.rows
					}
				})
			},
			toGoodsList(i) {
				const {allocationDocumentId, allocationShopsId} = i
				const d = {
					allocationDocumentId, allocationShopsId, type: this.type,shopId: this.shopId,
				
				}
				this.$u.route('/pages/order/goods_list', d)
			},
		}
	}
</script>

<style>
</style>
